<template>
	<view>
		<view class="heders">
			<view class="img">
				<image :src="'https:'+datalist.logo" mode="aspectFill"></image>
				<view class="name">{{datalist.name}}</view>
			</view>
			<view class="ares">{{datalist.areaName}}</view>
		</view>
		<view class="content">
			<view class="lbe">
				<view class="left_row">
						营业时间：
				</view>
				<view class="right" v-if="datalist.startTime">
					{{datalist.startTime}}~{{datalist.endTime}}
				</view>
			</view>
			<view class="lbe">
				<view class="left_row">
						商户楼层：
				</view>
				<view class="right">
					{{datalist.floorName || ''}}
				</view>
			</view>
			<view class="lbe">
				<view class="left_row">
						商户门号：
				</view>
				<view class="right">
					{{datalist.shopNumber || ''}}
				</view>
			</view>
			<view class="lbe">
				<view class="left_row">
						所属分类：
				</view>
				<view class="right">
			        {{datalist.categoryName || ''}}
				</view>
			</view>
		</view>
		<view class="spjs">
			<view class="title">商铺介绍</view>
			<view class="u-content">
				<u-parse :html="datalist.description"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import { shopinfo } from '@/core/api/index.js'
	 export default{
		 data(){
			 return{
				 datalist:{}
			 }
		 },
		 onLoad(r) {
		 	this.ShopInfo(r.id)
		 },
		 methods:{
			 async ShopInfo(id){
				 const {data} = await shopinfo(id)
				 this.datalist = data
			 }
		 }
	 }
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>
<style lang="scss">
	.heders{
		border-radius: 6px;
		background: #FFF;
		height: 180rpx;
		margin: 20rpx 25rpx;
		padding: 0 50rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.img{
			display: flex;
			font-size: 32rpx;
			align-items: center;
		}
		image{
			border: 1rpx solid #F5F5F5;
			border-radius: 10rpx;
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}
		.ares{
			color: var(--Color, #F26B2E);
			font-size: 32rpx;
		}
	}
	.content{
		border-radius: 6px;
		background: #FFF;
		margin: 20rpx 25rpx;
		padding: 28rpx 30rpx 3rpx;
		.lbe{
			display: flex;
			margin-bottom: 25rpx;
			.left_row{
				color: #A3A3A3;
			}
		}
	}
	.spjs{
		border-radius: 6px;
		background: #FFF;
		margin: 20rpx 25rpx;
		padding: 28rpx 30rpx;
		.title{
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
			color: #333;
		}
	}
	.u-content{
		color: #666666;
	}
</style>